<!-- 海报组件 -->
<template>
	<view class="posterbox">
		<uni-popup ref="popup" type="center">
			<image class="main1" :src="postDataUrl" mode="scaleToFill"></image>
			<view class="btn clo1" @click="isSave(1)">保存到相册</view>
			<view class="btn clo2" @click="isSave(2)">仅保存二维码</view>
		</uni-popup>
		<view class="main">
			<canvas style="width: 640px;height: 790px;" canvas-id="shareCanvas"></canvas>
		</view>
	</view>
</template>

<script>
	import { log } from 'util';
import * as index from '../../api/index.js'
	export default {
		props: {
			isId: Number
		},
		data() {
			return {
				postDataUrl: '', //生成的海报图片
				info: {} //海报数据
			}
		},
		mounted() {
			console.log(this.isId);
			this.getInfo()
		},
		methods: {
			//保存图片
			isSave(e) {
				var filePath = e == 1 ? this.postDataUrl : this.info.qrcode_image
				uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
							mask: true,
							icon: 'none',
							duration: 2000
						});
					},
					complete:(errs)=>{
						uni.showToast({
							title: errs,
							mask: true,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			//获取海报数据
			getInfo() {
				console.log(this.isId);
				index.isDetail({
					id: this.isId
				}).then(res => {
					uni.getImageInfo({
						src: res.data.qrcode_image,
						success: (image) => {
							res.data.qrcode_image = image.path
						}
					})
					uni.getImageInfo({
						src: res.data.images[0],
						success: (image1) => {
							res.data.images[0] = image1.path
						}
					})
					this.info = res.data
					setTimeout(()=>{
						this.startDraw()
					},2000)
				})
			},
			//绘制海报
			startDraw() {
				var ctx = uni.createCanvasContext('shareCanvas', this)
				//绘制背景
				ctx.setFillStyle('#A0FF55')
				ctx.fillRect(15, 15, 610, 67)
				ctx.setFillStyle('#fff')
				ctx.fillRect(15, 82, 610, 693)
				// 大图
				ctx.drawImage(this.info.images[0], 15, 82, 610, 430)

				// 左上角图片
				ctx.drawImage('/static/poster/icon1.png', 0, 0, 196, 100)
				console.log(4,'ccc')
				//标题
				if (this.info.name.length > 13) {
					this.info.name = this.info.name.slice(0, 13) + '...'
				}
				ctx.font = 'normal 500 40px sans-serif'
				ctx.setFillStyle('#000')
				ctx.setTextAlign('left')
				ctx.fillText(this.info.name, 39, 570)
				//分割线
				ctx.setLineDash([10, 6])
				ctx.beginPath()
				ctx.moveTo(35, 604)
				ctx.lineTo(610, 604)
				ctx.setLineWidth(0.3)
				ctx.stroke()

				//邀请内容
				//谁的邀请
				var name = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').nickname : ''
				if (name.length > 5) {
					name = name.slice(0, 5) + '...'
				}
				ctx.font = 'normal 500 32px sans-serif'
				ctx.setFillStyle('#000')
				ctx.setTextAlign('left')
				ctx.fillText(name + '邀请你参加啦', 39, 660)
				//时间
				ctx.drawImage('/static/poster/icon2.png', 39, 692, 24, 24)
				ctx.font = 'normal 500 28px sans-serif'
				ctx.setFillStyle('#000')
				ctx.setTextAlign('left')
				ctx.fillText(this.info.start_time_desc, 71, 714)
				
				//地点
				if(this.info.address.length > 11){
					this.info.address = this.info.address.slice(0, 11) + '...'
				}
				ctx.drawImage('/static/poster/icon3.png', 39, 730, 26, 26)
				ctx.font = 'normal 500 28px sans-serif'
				ctx.setFillStyle('#000')
				ctx.setTextAlign('left')
				ctx.fillText(this.info.address, 73, 752)

				//二维码
				ctx.drawImage(this.info.qrcode_image, 470, 630, 140, 140)

				// 绘制完毕
				ctx.draw(true, () => { // draw方法 把以上内容画到 canvas 中。
					wx.canvasToTempFilePath({ // 保存canvas为图片
						canvasId: 'shareCanvas',
						
						complete: (res) => {
							this.postDataUrl =res.tempFilePath
						}
					}, this)
					 // uni.canvasToTempFilePath({  
					 //                canvasId: 'shareCanvas',  
					 //                success: function(res) {  
						// 				console.log(res.tempFilePath);
					 //                    this.postDataUrl=res.tempFilePath;  
					 //                    // this.photo = res.tempFilePath;  
					 //                    // this.photo = 'file:/' + plus.io.convertLocalFileSystemURL(res.tempFilePath);  
					 //                    // console.log(this.photo);  
					 //                }  
					 //            });  
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.posterbox {
		position: relative;

		.main {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 0;
			overflow: hidden;
			z-index: -999;
		}

		.main1 {
			width: 610rpx;
			height: 760rpx;
			// background: #fff;
		}

		.btn {
			margin-top: 30rpx;
			width: 606rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 71rpx;
		}

		.clo1 {
			border: 2rpx solid #A0FF55;
			background: #A0FF55;
			color: #000;
		}

		.clo2 {
			background: transparent;
			border: 2rpx solid #fff;
			color: #fff;
		}
	}
</style>